<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			img {
				height: 200px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">gallery（图片轮播）</h1>
		</header>

		<div class="mui-content">
			<div class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<a href="http://blog.csdn.net/zh_rey/article/details/69666232"><img src="http://game.ahgame.com/uploads/allimg/160714/57-160G40Z2160-L.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="http://i2.hdslb.com/bfs/archive/338c65b4d08fddb8dea18a675905441c65745a22.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="http://img.9553.com/uploadfile/2016/0713/20160713022803376.png" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="http://img.newyx.net/article/image/201603/12/f3a400e19c.jpg" /></a>
					</div>
				</div>
			</div>
		</div>

		<!--
			作者：460575807@qq.com
			时间：2017-07-10
			描述：循环的
		-->

		<div class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#"><img src="http://ico.58pic.com/iconset01/halloween-icons/gif/94804.gif" /></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="http://ico.58pic.com/iconset01/halloween-icons/gif/94811.gif" /></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="http://ico.58pic.com/iconset01/halloween-icons/gif/94785.gif" /></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="http://ico.58pic.com/iconset01/halloween-icons/gif/94806.gif" /></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="http://ico.58pic.com/iconset01/halloween-icons/gif/94804.gif" /></a>
				</div>
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#"><img src="http://ico.58pic.com/iconset01/halloween-icons/gif/94811.gif" /></a>
				</div>
			</div>
		</div>

	</body>
	<script>
		//获得slider插件对象
		var gallery = mui('.mui-slider');
		gallery.slider({
			interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
		});
	</script>

</html>